﻿
@{
    Layout = null;
}
@model SiteConfigModel

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="~/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="~/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="~/css/site.css" media="all">
    <style>
        .img_logo {           
            margin-bottom: 15px;
        }
        .site_logo {
            width: 150px;
            cursor: pointer;
            margin-left: 110px;
            border: 1px dashed #c9c7c7;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">站点信息</div>
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" lay-filter="form-group">
                    <div class="img_logo">
                        <label class="layui-form-label">网站Logo</label>
                        <div class="site_logo" id="btnAddLogo">
                            @if (!string.IsNullOrWhiteSpace(Model.Logo))
                            {
                                <img src="@Model.Logo" style="width:100%" />
                            }
                            else
                            {
                                <img src="/img/a12.png" style="width:100%" />
                            }
                        </div>
                        <div class="layui-form-mid layui-word-aux" style="margin-left:110px;">请上传分辨率440*100的图片</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="CompanyName" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input w500" value="@Html.Raw(Model.CompanyName)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="Address" lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input w500" value="@Html.Raw(Model.Address)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="Phone" lay-verify="tellphone" placeholder="请输入电话" autocomplete="off" class="layui-input w500" value="@Html.Raw(Model.Phone)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="Email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input w500" value="@Html.Raw(Model.Email)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">网站关键词</label>
                        <div class="layui-input-block">
                            <input type="text" name="Keywords" placeholder="请输入网站关键词" autocomplete="off" class="layui-input" value="@Html.Raw(Model.Keywords)">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">网站描述</label>
                        <div class="layui-input-block">
                            <textarea name="Description" placeholder="请输入内容" class="layui-textarea">@Html.Raw(Model.Description)</textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">版权信息</label>
                        <div class="layui-input-block">
                            <input type="text" name="Copyright" lay-verify="required" placeholder="请输入版权信息" autocomplete="off" class="layui-input" value="@Html.Raw(Model.Copyright)">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">备案号</label>
                        <div class="layui-input-block">
                            <input type="text" name="RecordNo" lay-verify="required" placeholder="请输入网站备案号" autocomplete="off" class="layui-input w500" value="@Html.Raw(Model.RecordNo)">
                        </div>
                    </div>
                    <input type="hidden" name="Logo" id="txtLogo" lay-verify="imgurl" value="@Html.Raw(Model.Logo)">
                    <div class="layui-form-item layui-layout-admin">
                        <div class="layui-input-block">
                            <div class="layui-footer" style="left: 0;">
                                <button class="layui-btn" lay-submit="" lay-filter="form-page">立即保存</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="~/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'upload'], function () {
            var $ = layui.$
                , layer = layui.layer
                , upload = layui.upload
                , form = layui.form;

            form.render();

            //自动上传
            upload.render({
                elem: '#btnAddLogo',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif',
                url: '/Upload/UploadImage',
                auto: true,
                done: function (res) {                   
                    var imgHtml = '<img src=' + res.url + ' style="width:100%">';
                    $('#btnAddLogo').html(imgHtml);
                    $('#txtLogo').val(res.url);                  
                },
                error: function (res) {
                    console.log(res);
                    layer.msg('上传失败，服务器错误！');
                }
            });

            /* 自定义验证规则 */
            var mobile = /^1[3|4|5|7|8]\d{9}$/, phone = /^0\d{2,3}-?\d{7,8}$/;
            form.verify({
                required: function (value) {
                    if (value.length < 1) {
                        return '必填项不能为空';
                    }
                },
                imgurl: function (value) {
                    if (value.length < 1) {
                        return '请选择网站logo';
                    }
                },
                tellphone: function (value) {
                    var flag = mobile.test(value) || phone.test(value);
                    if (!flag) {
                        return '请输入正确座机号码或手机号';
                    }
                }
            });

            ///* 监听提交 */
            form.on('submit(form-page)', function (data) {
                console.log(data.field);
                layer.confirm('确认保存信息吗？', function (index) {
                    $.ajax({
                        type: "post",
                        url: '/Admin/SiteInfo',
                        data: data.field,
                        dataType: "json",
                        success: function (res) {
                            layer.close(index);
                            if (res.code == 1000) {
                                layer.msg(res.msg);
                            }
                            else {
                                layer.msg(res.msg, { icon: 5 });
                            }                          
                        }                           
                    });

                });
                //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                return false;
            });
        });
    </script>
</body>
</html>

